<template>
  <div>
    <!-- 引入导航栏组件 -->
    <NavBar />
    <!-- 为您的爱宠提供专业美容服务部分 -->
    <div class="hero-section">
      <div class="hero-text">
        <h1>专业美容呵护，焕新萌宠魅力</h1>
        <p>专业美容师团队，优质服务体验，让您的宠物展现最佳状态</p>
        <button class="btn" @click="goToReservation">立即预约</button>
      </div>
    </div>
    <!-- 热门服务项目部分 -->
    <div class="popular-services-section">
      <h2>热门服务项目</h2>
      <div class="service-item" v-for="(service, index) in services" :key="index">
        <div class="service-content">
          <img :src="service.image" :alt="service.title">
          <div class="service-details">
            <h3>{{ service.title }}</h3>
            <p>{{ service.description }}</p>
            <span class="price">{{ service.price }}</span>
            <button class="btn" @click="goToReservation">立即预约</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 我们的特色服务部分 -->
    <div class="features-section">
      <h2>我们的特色服务</h2>
      <div class="feature-item" v-for="(feature, index) in features" :key="index">
        <img :src="feature.image" :alt="feature.title">
        <h3>{{ feature.title }}</h3>
        <p>{{ feature.description }}</p>
      </div>
    </div>
    
    <!-- 顾客评价部分 -->
    <div class="testimonials">
      <h2 class="section-title">顾客评价</h2>
      <el-carousel :interval="4000" type="card">
        <el-carousel-item v-for="(review, index) in reviews" :key="index">
          <div class="testimonial-card">
            <div class="user-info">
              <img :src="review.avatar" :alt="review.name" class="user-avatar">
              <h3>{{ review.name }}</h3>
            </div>
            <div class="rating">
              <el-rate v-model="review.rating" disabled></el-rate>
            </div>
            <p class="review-content">{{ review.content }}</p>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 立即预约部分 -->
    <div class="cta-section">
      <h2>立即预约</h2>
      <p>为您的爱宠预约专业的美容服务，享受贴心呵护</p>
      <button class="btn" @click="goToReservation">在线预约</button>
      <button class="btn btn-outline">联系客服</button>
    </div>
    <!-- 引入底部信息组件 -->
    <PageFooter />
  </div>
</template>

<script setup>
import NavBar from '@/components/NavBar.vue';
import PageFooter from '@/components/PageFooter.vue';
import { useRouter } from 'vue-router';

const router = useRouter();

function goToReservation() {
  router.push('/reservation');
}

// 热门服务项目数据
const services = [
  {
    title: "精细洗护套餐",
    description: "专为爱宠定制深度清洁方案，采用温和低敏沐浴露，配合专业 spa 按摩手法，深度清洁毛发、去除皮屑，同时滋养皮肤。从头部到脚掌，不放过任何一处角落，让宠物享受沉浸式洁净体验。特别适合毛发易出油、日常活动量大的宠物",
    price: "价格：小型犬 68 元 / 次，中型犬 98 元 / 次，大型犬 128 元 / 次",
    image: require('@/assets/service1.png')
  },
  {
    title: "造型美容设计",
    description: "资深宠物造型师根据宠物品种、体型、毛发特点，结合潮流元素，打造专属时尚造型。无论是可爱泰迪装、优雅西施范，还是个性创意造型，都能满足您的需求。服务过程中，造型师会与您充分沟通，确保造型效果符合预期",
    price: "价格：基础造型设计 158 元起，复杂创意造型根据设计难度面议",
    image: require('@/assets/service2.png')
  },
  {
    title: "皮毛护理养护",
    description: "针对干燥、打结、褪色等毛发问题，提供专业护理方案。使用进口护理产品，通过深层滋养、修复受损毛囊，让宠物毛发恢复柔顺亮泽。同时，进行皮肤检测，预防皮肤病，为宠物皮毛健康保驾护航",
    price: "价格：单次护理 128 元，3 次护理套餐 328 元，6 次护理套餐 628 元",
    image: require('@/assets/service3.png')
  },
  {
    title: "专业修剪服务",
    description: "由经验丰富的修剪师操刀，精准把控修剪长度与形状，让宠物毛发整齐利落。涵盖指甲修剪、脚底毛清理、耳毛修剪等细节服务，有效减少宠物日常活动不便，降低卫生隐患",
    price: "价格：基础修剪服务 58 元，包含指甲、脚底毛、耳毛修剪；单项修剪服务 20 元 / 项",
    image: require('@/assets/service4.png')
  }
];

// 特色服务数据
const features = [
  {
    title: "专业美容师团队",
    description: "拥有多年经验的专业美容师，为爱宠提供贴心服务",
    image: require('@/assets/feature1.png')
  },
  {
    title: "品牌洗护用品",
    description: "精选优质品牌洗护产品，呵护宠物皮毛健康",
    image: require('@/assets/feature2.png')
  },
  {
    title: "舒适安全环境",
    description: "宽敞明亮的环境，先进的设备，让宠物享受舒适体验",
    image: require('@/assets/feature3.png')
  },
  {
    title: "一对一定制服务",
    description: "根据宠物特点定制专属美容方案，打造完美造型",
    image: require('@/assets/feature4.png')
  }
];

// 顾客评价数据
const reviews = [
  {
    id:1,
    name: "林美铃",
    rating: 5,
    content: "美容师非常专业，我家金毛每次来都很开心。服务很细致，环境也很好，值得推荐！",
    avatar: require('@/assets/customer1.png')
  },
  {
    id:2,
    name: "张志远",
    rating: 5,
    content: "店里的设备很先进，美容师技术很好，我家猫咪做完美容后特别漂亮，非常满意！",
    avatar: require('@/assets/customer2.png')
  },
  {
    id:3,
    name: "刘雨婷",
    rating: 5,
    content: "服务很贴心，美容师会详细解释护理方案，价格也很合理，是值得信赖的宠物美容店！",
    avatar: require('@/assets/customer3.png')
  }
];
</script>

<style scoped>
/* 全局样式 */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

/* 为您的爱宠提供专业美容服务部分样式 */
.hero-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('../assets/grooming-hero.jpg');
  background-size: cover;
  background-position: center;
  padding: 80px;
  color: white;
  height: 600px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  animation: heroAnimation 1.5s ease;
}
@keyframes heroAnimation {
  from {
    opacity: 0.5;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.hero-text {
  position: relative;
  z-index: 2;
  width: 70%;
  text-align: center;
  font-size: 30px;
  line-height: 1.4;
}

/* 热门服务项目部分样式 */
.popular-services-section {
  padding: 80px;
  text-align: center;
}

.service-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  margin: 30px auto;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  background-color: white;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: serviceAnimation 1.5s ease;
}
@keyframes serviceAnimation {
  from {
    opacity: 0.5;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.service-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.service-content {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.service-content img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 10px;
  margin-right: 30px;
}

.service-details {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.price {
  color: #e76f51;
  font-weight: bold;
  margin-top: 10px;
}

/* 我们的特色服务部分样式 */
.features-section {
  padding: 80px;
  text-align: center;
  background-color: #f9f9f9;
}
.feature-item {
  display: inline-block;
  width: 20%;
  margin: 10px;
  padding: 10px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  background-color: white;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: featureAnimation 1.5s ease;
}
@keyframes featureAnimation {
  from {
    opacity: 0.5;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.feature-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.feature-item img {
  width: 80%;
  height: 150px;
  object-fit: contain;
  margin-bottom: 20px;
}

/* 顾客评价部分样式 */
.testimonials {
  padding: 40px;
  margin-bottom: 40px;
  background-color: #f9f9f9;
}

.testimonial-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

.user-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
}

.review-content {
  margin-top: 15px;
}

.section-title {
  text-align: center;
  margin: 40px 0;
  font-size: 32px;
  color: #333;
}

/* 立即预约部分样式 */
.cta-section {
  padding: 80px;
  text-align: center;
  background-color: #fbe8dc;
}

/* 按钮样式 */
.btn {
  background-color: #e76f51;
  color: white;
  padding: 15px 30px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin: 10px;
  font-weight: 600;
  transition: background-color 0.3s ease;
}
.btn:hover {
  background-color: #d65c41;
}
.btn-outline {
  background-color: transparent;
  color: #e76f51;
  border: 2px solid #e76f51;
  padding: 15px 30px;
  border-radius: 8px;
  cursor: pointer;
  margin: 10px;
  font-weight: 600;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.btn-outline:hover {
  background-color: #e76f51;
  color: white;
}
</style>